<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/* 1.控制字体：font-family指定字体家族属性 */
			{
				/* 免费：微软雅黑，楷体，sans-serif“无衬线字体”等同于黑体，宋体... */
				font-family:微软雅黑,sans-serif;
				/* 用户电脑存在字体，按照顺序选择执行，二选一，就近原则 */
				/* font-size字体尺寸属性;px 绝对值--pc  em：相对于父元素字体倍数调整--移动端 */
				font-size: 50px;
				/* font-weight字体加粗属性 属性值：数值【整数】 100细~900粗
				                                 英文   normal=400,blod=900*/
			    font-weight:normal;
				/* font-style字体的样式属性 */
				font-style:italic;(倾斜)
				/* text-transform字体转换属性 :uppercase转大写
				                              lowercase转小写
											  capitalize首字母转大写*/
				text-transform:uppercase;
				text-transform:lowercase;
				text-transform:capitalize;
				/* text-indent 文本首行缩进属性：属性值 数值px */
				text-indent:200px;
			}
			/* 2.控制文本呢布局 */
			h 1 +p{
				border:1px solid red;
				/* text-align文本对齐属性：属性值：left/right/center[空间宽度]
				                                 justify  两端对齐【文本占满空间】
												 针对文本左右布局
				 */
				text-align:center;
				text-align:justify;
				/* line-height行高属性:属性值：数值px  针对文本行高,文本垂直居中 */
				height: 40px;
				line-height:40px;
				/* 文本呢垂直居中:高度与行高一致 */
				/* letter-spacing字符间距属性:属性值[正负] 数值px */
				letter-spacing:-1px;
				/* word-spacing单词间距属性: 属性值[正负]数值p */
				word-spacing:10px;
				
			}
			/* 3.文本装饰效果 */
			p a{
				border:1px solid #6d6d6d;
				padding:6px;
				border-radius: 3px;
				margin-left:10px;
			}
			/* 默认效果:去边框,下划线去掉 */
			p a.current{
				border:0px;
				/* text-decoration超链接效果属性:属性值 none 去掉下划线
				                                underline默认有下划线
												line-through 删除线
				 */
				text-decoration:none;
				text-decoration:underline;
				color: black;
				text-decoration:line-through;
			}
			p>span{
				bo rder:1px solid red;
				/* text-shadow文本阴影属性     阴影:①滤镜:下阴影②文本阴影③盒子阴影 */
				/* 属性值:X Y 模糊距离 颜色*/
				text-shadow:5px 5px 10px #55ffff ;
			}
			/* 4.文本换行属性 */
			h1~span{
				border:1px solid red;
				/* white-space文本换行属性:nowrap 一行显示,添加回车,显示效果:存在空格
				                          per    保留空格与回车
										  noemal 默认 空格合并
				*/
				whi te-space:nowrap;
				w hite-space:pre;
				white-space:normal;
			}
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：针对文本和字体，四种效果：
		     ①控制字体：font-family,font-size,font-weight等
			 ②控制文本布局：test-aligin,line-height,letter-spacing等
			 ③文本装饰效果text-decoration,text-shadow等
			 ④文本溢出和换行：overflow,white-space
		 -->
		 <h1>文本格式化属性：控制字体</h1>
		 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nulla enim veritatis rerum molestias consequatur natus dolorem quisquam alias, non fugit minima, accusantium reprehenderit vitae dolores nobis quos pariatur totam!
		<h1>控制文本布局：文本</h1>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis vero cumque quod necessitatibus perferendis at in aut dolore soluta amet, distinctio minima dignissimos voluptas qui ex accusamus, maiores repellendus ut!</p>	
		<h1>文本装饰效果</h1>
		<p>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<span>测试文本呢阴影</span>
		</p>
		<h1>文本换行属性</h1>
		<span>L         ore
		m ipsum dolor sit amet consectetur adipisicing elit. Numquam consequatur, atque magnam veritatis nemo aliquid ratione, earum tempore quas mollitia sint recusandae nulla ex provident quibusdam modi inventore molestias minima.</span>
	</body>
</html>